<template>
    <div class="setComponent">
        <div class="form-item">
            <label>标题</label>
            <el-button size="mini" @click="butClick(['title', obj.title])">编辑</el-button>
        </div>
        <div class="form-item">
            <label>描述</label>
            <el-button size="mini" @click="butClick(['smTitle', obj.smTitle])">编辑</el-button>
        </div>
        <div class="form-item">
            <label>背景图片</label>
            <el-button size="small" type="primary" @click="imgloadClick">上传图片</el-button>
        </div>
        <div class="form-item">
            <label>主标题文字动画</label>
            <el-select v-model="obj.animateTitle" clearable placeholder="请选择">
                <el-option-group
                    v-for="(group,i) in options"
                    :key="i"
                    :label="group.label">
                    <el-option
                        v-for="(item,itemIndex) in group.options"
                        :key="itemIndex"
                        :label="item.label"
                        :value="item.value"/>
                </el-option-group>
            </el-select>
        </div>
        <div class="form-item">
            <label>副标题文字动画</label>
            <el-select v-model="obj.animateText" clearable placeholder="请选择">
                <el-option-group
                    v-for="(group,i) in options"
                    :key="i"
                    :label="group.label">
                    <el-option
                        v-for="(item,itemIndex) in group.options"
                        :key="itemIndex"
                        :label="item.label"
                        :value="item.value"/>
                </el-option-group>
            </el-select>
        </div>
    </div>
</template>
<script>
import { animateOptions } from '@/utils/animateOptions'
export default {
    name: 'CoverImg',
    props: {
        obj: {
            type: Object

        }
    },
    data() {
        return {
            options: animateOptions
        }
    },
    methods: {
        butClick(msg) {
            this.$emit('butClick', msg)
        },
        imgloadClick() {
            this.$emit('imgloadClick', this.obj)
        }
    }
}
</script>
<style lang="scss">

</style>

